<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>旅游</title>
		<link rel="stylesheet" href="css/font-awesome.min.css" />
		<link rel="stylesheet" href="css/element/index.css" />
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/hzw-city-picker.css" />
		<script src="js/vue.min.js" type="text/javascript"></script>
		<script src="js/element/index.js" type="text/javascript"></script>
		<script src="js/jquery.min.js" type="text/javascript"></script>
		<script src="js/city-data.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/hzw-city-picker.min.js" type="text/javascript"></script>
		<script src="js/common.js" type="text/javascript"></script>
	</head>

	<body>
		<div id="container">
			<!-- 顶部菜单 start -->
			<el-row type="flex" justify="center" id="top-menu">
				<el-col :sm="16" class="top-container">
					<el-row>
						<el-col :sm="14">
							<span>您好，请<a href="javascript:;">登录</a></span> &nbsp;&nbsp;
							<a href="javascript:;">免费注册</a>
						</el-col>
						<el-col :sm="10" class="top-nav">
							<div>
								<a href="javascript:;" class="text-green bold">我的订单</a>
							</div>
							<el-dropdown>
								<span class="el-dropdown-link">
							    	客户服务<i class="el-icon-arrow-down el-icon--right"></i>
							  	</span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item>帮助中心</el-dropdown-item>
									<el-dropdown-item>在线服务</el-dropdown-item>
									<el-dropdown-item>人工申诉</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
							<el-dropdown>
								<span class="el-dropdown-link">
							    	合作中心<i class="el-icon-arrow-down el-icon--right"></i>
							  	</span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item>网站联盟</el-dropdown-item>
									<el-dropdown-item>品牌合作</el-dropdown-item>
									<el-dropdown-item>合作加盟</el-dropdown-item>
									<el-dropdown-item>门票合作</el-dropdown-item>
									<el-dropdown-item>商旅合作</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
							<div id="app">
								&nbsp;&nbsp;
								<i class="fa fa-mobile-phone fa-2x text-green" style="position: absolute;top: 3px;"></i> &nbsp;&nbsp;
								<div class="bg-yellow text-center">
									<h3>扫码下载APP</h3>
									<img src="img/QRcode.png" />
								</div>
							</div>
							<div id="wechat">
								<i class="fa fa-weixin fa-lg text-green"></i>
								<div class="bg-yellow text-center">
									<h3>扫码关注公众号</h3>
									<img src="img/QRcode.png" />
								</div>
							</div>
						</el-col>
					</el-row>
				</el-col>
			</el-row>
			<!-- 顶部菜单 end -->

			<!-- LOGO及搜索 start -->
			<el-row type="flex" justify="center" id="logo-bar">
				<el-col :sm="16">
					<el-row>
						<el-col :sm="4" class="text-center">
							<img src="img/logo.png" />
						</el-col>
						<el-col :sm="2">
							<div id="city-box">
								<input type="text" id="city-choice" value="沈阳" readonly="readonly">
								<i class="fa fa-angle-down text-lg"></i>
							</div>
						</el-col>
						<el-col :sm="12" style="position: relative;">
							<div id="search-box">
								<el-input value="沈阳">
									<template slot="append">
										<el-button>搜 索</el-button>
									</template>
								</el-input>
							</div>
						</el-col>
						<el-col :sm="6">
							<img src="img/tel.png" / style="width: 210px;display: block;margin: 0 auto;">
						</el-col>
					</el-row>
				</el-col>
			</el-row>
			<!-- LOGO及搜索 end -->

			<!-- menu start -->
			<el-row type="flex" justify="center" id="list-menu-bar">
				<el-col :sm="16">
					<ul>
						<li>
							<a href="javascript:;" class="active">热门</a>
						</li>
						<li>
							<a href="javascript:;">景点门票</a>
						</li>
						<li>
							<a href="javascript:;">酒+景套餐</a>
						</li>
						<li>
							<a href="javascript:;">周边跟团游</a>
						</li>
						<li>
							<a href="javascript:;">酒店</a>
						</li>
					</ul>
				</el-col>
			</el-row>
			<!-- menu end -->

			<!-- 查询条件框 start -->
			<el-row type="flex" justify="center" id="list-condition-bar" class="bg-lightgray">
				<el-col :sm="16">
					<div class="shadow bg-white">
						<div id="condition-box">
							<ul>
								<li>
									<el-row>
										<el-col :span="2" class="text-ml bold text-center">游玩类型</el-col>
										<el-col :span="20">
											<div class="float-l">
												<span class="mini-block bg-green">不限</span>
											</div>
											<div class="condition float-l">
												<span class="type">
													<a href="">景点门票</a>
												</span>
												<span class="type">
													<a href="">酒+景套餐</a>
												</span>
												<span class="type">
													<a href="">周边跟团游</a>
												</span>
											</div>
										</el-col>
									</el-row>
								</li>
								<li>
									<el-row>
										<el-col :span="2" class="text-ml bold text-center">出发城市</el-col>
										<el-col :span="20">
											<div class="float-l">
												<span class="mini-block bg-green">不限</span>
											</div>
											<div class="condition float-l">
												<template>
													<el-checkbox-group v-model="checkList">
														<el-checkbox label="沈阳"></el-checkbox>
													</el-checkbox-group>
												</template>
											</div>
										</el-col>
									</el-row>
								</li>
								<li>
									<el-row>
										<el-col :span="2" class="text-ml bold text-center">游玩天数</el-col>
										<el-col :span="20">
											<div class="float-l">
												<span class="mini-block bg-green">不限</span>
											</div>
											<div class="condition float-l">
												<template>
													<el-checkbox-group v-model="checkList">
														<el-checkbox label="1天"></el-checkbox>
														<el-checkbox label="2天"></el-checkbox>
														<el-checkbox label="5天"></el-checkbox>
														<el-checkbox label="6天"></el-checkbox>
														<el-checkbox label="10天"></el-checkbox>
													</el-checkbox-group>
												</template>
											</div>
										</el-col>
									</el-row>
								</li>
								<li>
									<el-row>
										<el-col :span="2" class="text-ml bold text-center">出发日期</el-col>
										<el-col :span="20">
											<div class="float-l">
												<span class="mini-block bg-green">不限</span>
											</div>
											<div class="condition float-l">
												<template>
													<el-checkbox-group v-model="checkList">
														<el-checkbox label="2018年1月"></el-checkbox>
														<el-checkbox label="2018年2月"></el-checkbox>
														<el-checkbox label="2018年3月"></el-checkbox>
													</el-checkbox-group>
												</template>
											</div>
										</el-col>
									</el-row>
								</li>
							</ul>
							<div class="filter">
								<ul>
									<li>综合</li>
									<li>销量&nbsp;<i class="fa fa-long-arrow-down"></i></li>
									<li>点评&nbsp;<i class="fa fa-long-arrow-down"></i></li>
									<li>价格&nbsp;<i class="fa fa-long-arrow-down"></i></li>
								</ul>
								<div>
									<span>价格区间</span>
									<strong style="margin: 0 5px;">¥</strong><input type="text" maxlength="6" />
									<i> - </i>
									<strong style="margin: 0 5px;">¥</strong><input type="text" maxlength="6" />
									<el-button size="mini" type="warning">确定</el-button>
								</div>
								<div class="filter-right">
									<el-checkbox checked>红包可用</el-checkbox>
								</div>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
			<!-- 查询条件框 end -->

			<!-- 查询结果展示 start -->
			<el-row type="flex" justify="center" id="list-result" class="bg-lightgray">
				<el-col :sm="16">
					<div class="total text-ml">
						<span>共<strong>48</strong>条产品</span>
					</div>
					<el-row>
						<el-col :span="18" class="left-part">
							<ul>
								<li>
									<div class="img-tip">
										景点门票
									</div>
									<div class="img-box">
										<a href=""><img src="img/list/list1.jpg" alt="" /></a>
									</div>
									<div class="detail-box">
										<span class="title">沈阳故宫</span>
										<div class="label-box">
											<dl>
												<dt>历史遗迹</dt>
												<dt>人文</dt>
											</dl>
										</div>
										<div class="price"><strong>¥</strong><span>58</span>起</div>
										<div class="detail-info">
											<p><span>特色：</span>融汉满蒙各族艺术于一体，有很高历史价值</p>
											<p><span>开放时间：</span>4月10日-10月10日开闭馆时间：8:30-17:30，停止售票：16:45</p>
											<p><span>地址：</span>辽宁省沈阳市沈河区沈阳路171号</p>
										</div>
										<div class="evaluate">
											<el-rate v-model="value1" disabled show-score text-color="#ff9900" score-template="{value}">
											</el-rate>
											<a href="javascript:;"><strong>2130</strong>条评论 >></a>
										</div>
									</div>
								</li>
								<li>
									<div class="img-tip">
										景点门票
									</div>
									<div class="img-box">
										<a href=""><img src="img/list/list2.jpg" alt="" /></a>
									</div>
									<div class="detail-box">
										<span class="title">沈飞航空博览园</span>
										<div class="label-box">
											<dl>
												<dt>休闲娱乐</dt>
												<dt>展览</dt>
											</dl>
										</div>
										<div class="price"><strong>¥</strong><span>25</span>起</div>
										<div class="detail-info">
											<p><span>特色：</span>沈飞航空博览园是全国工业旅游示范点</p>
											<p><span>开放时间：</span>8:30-16:30（周一闭馆）</p>
											<p><span>地址：</span>辽宁省沈阳市皇姑区陵北街1号</p>
										</div>
										<div class="evaluate">
											<el-rate v-model="value2" disabled show-score text-color="#ff9900" score-template="{value}">
											</el-rate>
											<a href="javascript:;"><strong>477</strong>条评论 >></a>
										</div>
									</div>
								</li>
								<li>
									<div class="img-tip">
										景点门票
									</div>
									<div class="img-box">
										<a href=""><img src="img/list/list3.jpg" alt="" /></a>
									</div>
									<div class="detail-box">
										<span class="title">沈阳森林动物园</span>
										<div class="label-box">
											<dl>
												<dt>红包优惠</dt>
												<dt>休闲娱乐</dt>
												<dt>动物园</dt>
											</dl>
										</div>
										<div class="price"><strong>¥</strong><span>70</span>起</div>
										<div class="detail-info">
											<p><span>特色：</span>一同体验现实版动物世界</p>
											<p><span>开放时间：</span>旺季（4月1日 - 10月31日早8：30～15：00），淡季（11月1日 - 3月31日 早9：00～15：00）</p>
											<p><span>地址：</span>辽宁省沈阳市浑南区沈阳棋盘山国际旅游开发区</p>
										</div>
										<div class="evaluate">
											<el-rate v-model="value3" disabled show-score text-color="#ff9900" score-template="{value}">
											</el-rate>
											<a href="javascript:;"><strong>6431</strong>条评论 >></a>
										</div>
									</div>
								</li>
								<li>
									<div class="img-tip">
										景点门票
									</div>
									<div class="img-box">
										<a href=""><img src="img/list/list1.jpg" alt="" /></a>
									</div>
									<div class="detail-box">
										<span class="title">沈阳故宫</span>
										<div class="label-box">
											<dl>
												<dt>历史遗迹</dt>
												<dt>人文</dt>
											</dl>
										</div>
										<div class="price"><strong>¥</strong><span>58</span>起</div>
										<div class="detail-info">
											<p><span>特色：</span>融汉满蒙各族艺术于一体，有很高历史价值</p>
											<p><span>开放时间：</span>4月10日-10月10日开闭馆时间：8:30-17:30，停止售票：16:45</p>
											<p><span>地址：</span>辽宁省沈阳市沈河区沈阳路171号</p>
										</div>
										<div class="evaluate">
											<el-rate v-model="value1" disabled show-score text-color="#ff9900" score-template="{value}">
											</el-rate>
											<a href="javascript:;"><strong>2130</strong>条评论 >></a>
										</div>
									</div>
								</li>
								<li>
									<div class="img-tip">
										景点门票
									</div>
									<div class="img-box">
										<a href=""><img src="img/list/list1.jpg" alt="" /></a>
									</div>
									<div class="detail-box">
										<span class="title">沈阳故宫</span>
										<div class="label-box">
											<dl>
												<dt>历史遗迹</dt>
												<dt>人文</dt>
											</dl>
										</div>
										<div class="price"><strong>¥</strong><span>58</span>起</div>
										<div class="detail-info">
											<p><span>特色：</span>融汉满蒙各族艺术于一体，有很高历史价值</p>
											<p><span>开放时间：</span>4月10日-10月10日开闭馆时间：8:30-17:30，停止售票：16:45</p>
											<p><span>地址：</span>辽宁省沈阳市沈河区沈阳路171号</p>
										</div>
										<div class="evaluate">
											<el-rate v-model="value1" disabled show-score text-color="#ff9900" score-template="{value}">
											</el-rate>
											<a href="javascript:;"><strong>2130</strong>条评论 >></a>
										</div>
									</div>
								</li>
							</ul>
							<div class="float-r">
								<el-pagination layout="prev, pager, next" :total="48">
								</el-pagination>
							</div>
						</el-col>
						<el-col :span="6" class="right-part">
							<!-- 热门目的地 start -->
							<div class="hot-des clearfix bg-white">
								<span class="title">热门目的地</span>
								<ul>
									<li>
										<a href="javascript:;">沈阳</a>
									</li>
									<li>
										<a href="javascript:;">哈尔滨</a>
									</li>
									<li>
										<a href="javascript:;">乌鲁木齐</a>
									</li>
									<li>
										<a href="javascript:;">厦门</a>
									</li>
									<li>
										<a href="javascript:;">大连</a>
									</li>
									<li>
										<a href="javascript:;">北京</a>
									</li>
									<li>
										<a href="javascript:;">海南</a>
									</li>
									<li>
										<a href="javascript:;">香港</a>
									</li>
								</ul>
							</div>
							<!-- 热门目的地 end -->

							<!-- 猜你喜欢 start -->
							<div class="guess clearfix bg-white">
								<span class="title">猜你喜欢</span>
								<ul>
									<li>
										<a href="javascript:;">
											<img src="img/a8.jpg" alt="" />
											<div class="detail-box">
												<p>【推荐】普吉岛4晚6日/5晚7日双人游...</p>
												<div>
													<span>沈阳出发</span>
													<span class="float-r"><i class="text-danger">¥5480</i>起</span>
												</div>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<img src="img/a8.jpg" alt="" />
											<div class="detail-box">
												<p>【推荐】普吉岛4晚6日/5晚7日双人游...</p>
												<div>
													<span>沈阳出发</span>
													<span class="float-r"><i class="text-danger">¥5480</i>起</span>
												</div>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<img src="img/a8.jpg" alt="" />
											<div class="detail-box">
												<p>【推荐】普吉岛4晚6日/5晚7日双人游...</p>
												<div>
													<span>沈阳出发</span>
													<span class="float-r"><i class="text-danger">¥5480</i>起</span>
												</div>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<img src="img/a8.jpg" alt="" />
											<div class="detail-box">
												<p>【推荐】普吉岛4晚6日/5晚7日双人游...</p>
												<div>
													<span>沈阳出发</span>
													<span class="float-r"><i class="text-danger">¥5480</i>起</span>
												</div>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<img src="img/a8.jpg" alt="" />
											<div class="detail-box">
												<p>【推荐】普吉岛4晚6日/5晚7日双人游...</p>
												<div>
													<span>沈阳出发</span>
													<span class="float-r"><i class="text-danger">¥5480</i>起</span>
												</div>
											</div>
										</a>
									</li>
								</ul>
							</div>
							<!-- 猜你喜欢 end -->
						</el-col>
					</el-row>
				</el-col>
			</el-row>
			<!-- 查询结果展示 end -->
			
			<!-- 页脚 start -->
			<footer>
				<el-row type="flex" justify="center">
					<el-col :sm="16">
						<span>Copyright &copy; 2017 - 2018 版权所有 沈阳畅星软件有限公司</span>
					</el-col>
				</el-row>
			</footer>
			<!-- 页脚 end -->
		</div>
	</body>

	<script type="text/javascript">
		new Vue({
			el: '#container',
			data: {
				checkList: [],
				value1: 4.8,
				value2: 4.5,
				value3: 5.0
			},
			methods: {
				handleSelect(key, keyPath) {
					console.log(key, keyPath);
				},
				handleOpen(key, keyPath) {
					console.log(key, keyPath);
				},
				handleClose(key, keyPath) {
					console.log(key, keyPath);
				},
				handleChange(value) {
					console.log(value);
				}
			}
		})

		var cityPicker = new HzwCityPicker({
			data: data,
			target: 'city-choice',
			valType: 'k-v',
			hideCityInput: {
				name: 'city',
				id: 'city'
			},
			hideProvinceInput: {
				name: 'province',
				id: 'province'
			},
			callback: function() {

			}
		});

		cityPicker.init();
	</script>

</html>